<template>
	<div class="Footer">
		<div class="footer-name">
			<span class="name">О нас</span>
			<span class="line">|</span>
			<span class="name">Свяжитесь с нами</span>
			<span class="line">|</span>
			<span class="name">Соглашение о конфиденциальности</span>
			<span class="line">|</span>
			<span class="name">Правовое заявление</span>
		</div>
		<div class="footer-line"></div>
		<div class="footer-tag">@2010-2024 xxxxxx.com</div>
	</div>
</template>

<script lang="ts" name="Home" setup>
	import { ref, reactive } from "vue";
	import { Delete, Edit, Search, Share, Upload } from '@element-plus/icons-vue'
	import { useRouter } from 'vue-router'
</script>
<script lang="ts">
	export default {
		name: 'Home',
	}
</script>

<style lang="less" scoped>
	.Footer {
		height: 144px;
		background: #333333;
	}

	.footer-name {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 38px 20px;

		.name,
		.line {
			font-family: PingFang SC;
			font-size: 16px;
			font-weight: 400;
			color: #FFFFFF;
		}

		.line {
			margin: 0 20px;
		}
	}
	.footer-line{
		width: 100%;
		height: 0.5px;
		background: rgba(255, 255, 255, 30%);
	}
	.footer-tag{
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: PingFang SC;
		font-size: 16px;
		font-weight: 400;
		color: #FFFFFF;
		margin-top: 16px;
	}
</style>